<template>
	<div class="top-menu">
		<el-menu :default-active="activeIndex" mode="horizontal" text-color="#333">
			<template v-for="(item,index) in items">
				<el-menu-item :index="item.parentId+''" @click.native="openMenu(item)" :key="index">
					<template slot="title">
						<i :class="item.icon" style="margin-right: 3px;font-size: 18px;"></i>
						<span style="font-size: 16px;">{{item.label}}</span>
					</template>
				</el-menu-item>
			</template>
		</el-menu>
	</div>
</template>

<script>
	import request from '@/router/axios';
	import {
		mapGetters
	} from "vuex";
	export default {
		name: "top-menu",
		data() {
			return {
				activeIndex: "0",
				items: [],
				top: [{
						label: "首页",
						path: "/wel/index",
						icon: 'el-icon-document',
						meta: {
							i18n: 'dashboard',
						},
						parentId: 0
					},
					{
						label: "官网",
						icon: 'el-icon-document',
						meta: {
							menu: false,
							i18n: 'website',
						},
						path: "https://avuejs.com",
						parentId: 1
					},
					{
						label: "测试111",
						icon: 'el-icon-document',
						path: "/test/index",
						meta: {
							i18n: 'test',
						},
						parentId: 2
					},
					{
						label: "更多",
						icon: 'el-icon-document',
						path: "/wel/dashboard",
						meta: {
							menu: false,
							i18n: 'more',
						},
						parentId: 3
					}
				]
			};
		},
		inject: ["index"],
		created() {
			this.getMenu();
		},
		computed: {
			...mapGetters(["tagCurrent", "menu"])
		},
		methods: {
			openMenu(item) {
				this.index.openMenu(item)
			},
			getMenu() {
				// this.$store.dispatch("GetTopMenu").then(res => {
				//   this.items = res;
				// });
				request({
					url: '/api/Menu/getTopMenu'
				}).then(res => {
					var menus = [];
					res.data.data.forEach(ele => {
						var v = {};
						v.label = ele.name;
						v.icon = ele.source;
						v.path = ele.path;
						v.parentId = ele.id;
						menus.push(v);
					});
					this.items = menus;
				});
				//this.items = this.top;
			},
			generateTitle(item) {
				return this.$router.$avueRouter.generateTitle(
					item.label,
					(item.meta || {}).i18n
				);
			}
		}
	};
</script>
